<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default" status-icon
            scroll-into-view-options="true">
            <el-form-item label="属性类型：" prop="integral">
                <el-select v-model="ruleForm.integral" placeholder="请选择属性类型">
                    <el-option label="dasdad" value="dasdad" />
                    <el-option label="asd" value="asd" />
                    <el-option label="aaaa" value="aaaa" />
                    <el-option label="zasdasdasd" value="zasdasdasd" />
                    <el-option label="fidwai" value="fidwai" />
                    <el-option label="daa" value="daa" />
                    <el-option label="5445456456456" value="5445456456456" />
                    <el-option label="123123123" value="123123123" />
                    <el-option label="dadawdafawdfa" value="dadawdafawdfa" />
                    <el-option label="dadawdawf" value="dadawdawf" />
                    <el-option label="dadadiffaspfa[fka" value="dadadiffaspfa[fka" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品规格：">
                <el-card class="box-card"></el-card>
            </el-form-item>
            <el-form-item>
                <el-table border style="width: 100%">
                    <el-table-column prop="date" label="销售价格" width="100" align="center" />
                    <el-table-column prop="name" label="商品库存" width="100" align="center" />
                    <el-table-column prop="address" label="库存预警值" width="100" align="center" />
                    <el-table-column prop="address" label="SKU编号" width="170" align="center" />
                    <el-table-column prop="address" label="操作" width="100" align="center" />
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" style="padding: 15px;">刷新列表</el-button>
                <el-button type="primary" size="small" style="padding: 15px;">同步价格</el-button>
                <el-button type="primary" size="small" style="padding: 15px;">同步库存</el-button>
            </el-form-item>
            <el-form-item label="商品参数：">
                <el-card class="box-card"></el-card>
            </el-form-item>
            <el-form-item label="商品相册：">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <template #file="{ file }">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <el-icon><zoom-in /></el-icon>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </span>
                            </span>
                        </div>
                    </template>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </el-form-item>
            <el-form-item label="规格参数：">
                <el-tabs type="card" class="demo-tabs" v-model="activeName">
                    <el-tab-pane label="电脑端详情" name="first">
                        <TinymceEditor :modelValue="content" />
                    </el-tab-pane>
                    <el-tab-pane label="移动端详情" name="second">
                        <TinymceEditor :modelValue="content" />
                    </el-tab-pane>
                </el-tabs>
            </el-form-item>
            <el-form-item class="button">
                <el-button class="before" @click="beforeClick">上一步，填写商品信息</el-button>
                <el-button type="primary" class="next" @click="nextClick">下一步，填写商品促销</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as api from '../../../request/api'
import useProduct from '../../../hooks/useProduct'
import dayjs from 'dayjs'
import { useProductStore } from '../../../stores/addProduct'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
// import { Editor } from '@tinymce/tinymce-react';
import type { UploadFile } from 'element-plus'
import TinymceEditor from './tinymce.vue'

let content = ''
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const activeName = ref('first')
const handleRemove = (file: UploadFile) => {
    console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
    console.log(file)
}

const visible = ref(false)
// 如果上面表格条件完成 , 跳转下一步
let product = useProductStore()
const beforeClick = () => {
    product.$patch({
        active: product.active - 1
    })
    // console.log(product.active);
}
const nextClick = () => {
    product.$patch({
        active: product.active + 1
    })
    // console.log(product.active);
}

const ruleForm = reactive({
    integral: '',
})
</script>

<style scoped lang="scss">
.demo-ruleForm {
    width: 680px;
    margin-top: 60px;
    margin-left: 20px;
}

.weight {
    display: flex;

    .el-input {
        width: 300px;
        margin-right: 20px;
    }
}

.button {
    margin-left: 50px;
}

.new {
    margin-right: 10px;
}

.mt {
    margin-top: 10px;
}

.box-card {
    width: 100%;
}
</style>